var app = new Vue({
	el: '#app',
	data: {
		autoOrStop: "自动",
		cells: [],
		cellsToShow: [],
		cellSize: "big",

	},
	mounted: function () {
		this.reset()
		console.log(this.cells)
	},
	methods: {
		autoNextStep: function () {
			if (this.autoOrStop == '自动') {
				this.autoOrStop = '停止'
				this.nextStep()
				let timer = setInterval(() => {
					if (this.getFavourite == true || this.autoOrStop == '自动') {
						clearInterval(timer)
					}
					this.nextStep()
				}, 500)
			} else if (this.autoOrStop == '停止') {
				this.autoOrStop = '自动'
			}

		},
		/**
		 * 下一步
		 */
		nextStep: function () {
			let cells = this.cells
			let array1 = []
			cells.forEach((row_item, row_index) => {
				row_item.forEach((cell_item, cell_index) => {
					let sum = 0
					// if (cell_item == 1) {

					if (row_index > 0 && cell_index > 0) {
						sum += cells[row_index - 1][cell_index - 1]
						// console.log(sum, row_index - 1, cell_index - 1)

					}
					if (row_index > 0) {
						sum += cells[row_index - 1][cell_index]
						// console.log(sum, row_index - 1, cell_index)
					}

					if (row_index > 0 && cell_index < row_item.length - 1) {
						sum += cells[row_index - 1][cell_index + 1]
						// console.log(sum, row_index - 1, cell_index + 1)

					}

					if (cell_index > 0) {
						sum += cells[row_index][cell_index - 1]
						// console.log(sum, row_index, cell_index - 1)

					}
					if (cell_index < row_item.length - 1) {
						sum += cells[row_index][cell_index + 1]
						// console.log(sum, row_index, cell_index + 1)

					}

					if (row_index < cells.length - 1 && cell_index > 0) {
						sum += cells[row_index + 1][cell_index - 1]
						// console.log(sum, row_index + 1, cell_index - 1)

					}
					if (row_index < cells.length - 1) {
						sum += cells[row_index + 1][cell_index]
						// console.log(sum, row_index + 1, cell_index)

					}

					if (row_index < cells.length - 1 && cell_index < row_item.length - 1) {
						sum += cells[row_index + 1][cell_index + 1]
						// console.log(sum, row_index + 1, cell_index + 1)

					}
					// }

					if (sum != 0) {
						// console.log(sum)
					}

					if (this.cells[row_index][cell_index] == 1 && (sum == 3 || sum == 2)) {
						array1.push([row_index, cell_index])
						// this.cells[row_index][cell_index] = 1
						console.log(row_index, cell_index)
					} else if (this.cells[row_index][cell_index] == 0 && sum == 3) {
						array1.push([row_index, cell_index])
					}

					// if (sum == 3) {
					// 	this.cells[row_index][cell_index] = 1
					// } else {
					// 	this.cells[row_index][cell_index] = 0
					// }
					// this.resize()

					// if (this.cellSize == "small") {
					// 	this.$set(this.cellsToShow[row_index], cell_index, sum == 3 ? 1 : 0)
					// } else {
					// 	if (row_index >= 15 && row_index < 25 && cell_index >= 15 && row_index < 25) {
					// 		// console.log(row_index, cell_index)
					// 		this.$set(this.cellsToShow[row_index - 15], (cell_index - 15), sum == 3 ? 1 : 0)
					// 	}

					// }
					// this.$set(this.cellsToShow[row_index], cell_index, sum == 3 ? 1 : 0)
					// if (sum == 3) console.log(row_index, cell_index)
					// if (sum != 0) console.log(row_index, cell_index, sum)


				})

			})
			console.log(this.cellsToShow)
			console.log(array1)
			this.cells = arr = [...Array(40)].map(item => [...Array(40)].fill(0))
			array1.forEach(item => {
				this.cells[item[0]][item[1]] = 1
			})
			this.resize()
			console.log(this.cells)
		},
		/**
		 * 重置
		 */
		reset: function () {


			this.cells = arr = [...Array(40)].map(item => [...Array(40)].fill(0))
			// this.cellsToShow =	this.cells

			this.resize()
			console.log(this.cells, this.cellsToShow)
		},
		/**
		 * 重设尺寸
		 */
		resize: function () {
			if (this.cellSize == "medium") {
				this.cellsToShow = this.cells
			} else if (this.cellSize == "big") {
				this.cellsToShow = this.cells.map((item, index) => {
					if (index >= 15 && index < 25) {
						return item.slice(15, 25)
					}
				})
				this.cellsToShow = this.cellsToShow.slice(15, 25)
			}
		},
		/**
		 * 切换尺寸
		 */
		exchangeSize: function () {
			this.cellSize = this.cellSize == "big" ? "medium" : "big"
			this.resize()
			console.log(this.cellSize)
		},
		clickCell: function (e) {
			let id = e.target.id
			let r = id.split(",")[0]
			let c = id.split(",")[1]
			console.log(e)


			// this.cellsToShow[r][c] = this.cellsToShow[r][c] == 1 ? 0 : 1
			this.$set(this.cellsToShow[r], c, this.cellsToShow[r][c] == 1 ? 0 : 1)
			// this.cellsToShow = this.cellsToShow
			console.log(this.cellsToShow)
			if (this.cellSize == "medium") {
				this.cells = this.cellsToShow
			} else {
				for (let i = 15; i < 25; i++) {
					this.cells[i].splice(15, 10, ...this.cellsToShow[i - 15])
				}
				// this.cells.forEach((item, index) => {
				// 	console.log(index)
				// 	item.splice(15,10,...this.cellsToShow[index])
				// 	item
				// })
			}
			console.log(this.cells)
		}
	}


})
